{% extends 'base.html' %}
{% load static %}
{% block title %}消息盒子{% endblock %}
{% block content %}
        <!-- 内容标题栏 -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-12">
            <h1 class="m-0 text-dark">消息盒子</h1>
          </div><!-- /.col -->
          <div class="col-sm-12">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="/">首页</a></li>
              <li class="breadcrumb-item active">消息盒子</li>
                <li class="breadcrumb-item active"><a href="">消息列表</a></li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /内容标题栏 -->
<section class="content">
<div class="container-fluid">
    <div class="row">
        {% if type_ == "system" %}
        <div class="col-12">
            <div class="card card-danger">
                <div class="card-header">
                    <h3 class="card-title">来自系统的消息</h3>
                </div>
                <div class="card-body">
                    <table class="table table-striped" id="sys_msg">
                        <thead>
                        <tr style="text-align: center;">
                            <th>序号</th>
                            <th>发送者</th>
                            <th>主题</th>
                            <th>主要内容</th>
                            <th>发信时间</th>
                            <th>状态</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for j in sys_msg %}
                        <tr style="text-align: center;">
                            <td style="vertical-align: middle;">{{ forloop.counter }}</td>
                            <td style="vertical-align: middle;">{{ j.sender }}</td>
                            <td style="vertical-align: middle;">{{ j.subject }}</td>
                            <td style="vertical-align: middle;">{{ j.contents }}</td>
                            <td style="vertical-align: middle;">{{ j.send_time }}</td>
                            {% if j.read_time %}
                            <td style="vertical-align: middle;">
                                <div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-focused bootstrap-switch-animate bootstrap-switch-on" style="width: 80px;">
                                    <div class="bootstrap-switch-container" style="width: 80px; margin-left: 0px;">
                                        <span class="bootstrap-switch-handle-on bootstrap-switch-primary" style="width: 80px;font-size: 10px;">已阅</span>
                                    </div>
                                </div>
                            </td>
                            {% else %}
                            <td style="vertical-align: middle;">
                            <div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-focused bootstrap-switch-animate bootstrap-switch-on" style="width: 80px;">
                                <div class="bootstrap-switch-container" style="width: 80px; margin-left: 0px;">
                                    <span class="bootstrap-switch-handle-off bootstrap-switch-danger" style="width: 80px;font-size: 10px;"><a href="javascript:;" onclick="tag_read({{ j.id }})" style="color: white;">标记已读</a></span>
                                </div>
                            </div>
                            </td>
                            {% endif %}
                        </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        {% else %}
        <div class="col-12">
            <div class="card card-gray">
                <div class="card-header">
                    <h3 class="card-title">来自用户的消息</h3>
                </div>
                <div class="card-body">
                    <table class="table table-striped" id="user_msg">
                        <thead>
                        <tr style="text-align: center;">
                            <th>序号</th>
                            <th>发送者</th>
                            <th>接收者</th>
                            <th>主题</th>
                            <th>主要内容</th>
                            <th>发信时间</th>
                            <th>状态</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for j in user_msg %}
                        <tr style="text-align: center;">
                            <td style="vertical-align: middle;">{{ forloop.counter }}</td>
                            <td style="vertical-align: middle;">{{ j.sender }}</td>
                            <td style="vertical-align: middle;">{{ j.receiver }}</td>
                            <td style="vertical-align: middle;">{{ j.subject }}</td>
                            <td style="vertical-align: middle;">{{ j.contents }}</td>
                            <td style="vertical-align: middle;">{{ j.send_time }}</td>
                            {% if j.read_time %}
                            <td style="vertical-align: middle;">
                                <div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-focused bootstrap-switch-animate bootstrap-switch-on" style="width: 80px;">
                                    <div class="bootstrap-switch-container" style="width: 80px; margin-left: 0px;">
                                        <span class="bootstrap-switch-handle-on bootstrap-switch-primary" style="width: 80px;font-size: 10px;">已阅</span>
                                    </div>
                                </div>
                            </td>
                            {% else %}
                            <td style="vertical-align: middle;">
                            <div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-focused bootstrap-switch-animate bootstrap-switch-on" style="width: 80px;">
                                <div class="bootstrap-switch-container" style="width: 80px; margin-left: 0px;">
                                    <span class="bootstrap-switch-handle-off bootstrap-switch-danger" style="width: 80px;font-size: 10px;"><a href="javascript:;" onclick="tag_read({{ j.id }})" style="color: white;">标记已读</a></span>
                                </div>
                            </div>
                            </td>
                            {% endif %}
                        </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% if info %}
    <script>
    alert("{{ info }}")
    </script>
{% endif %}
</section>
{% block custom_js %}
    <!--dataTables-->
   <script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>
   <script src="{% static 'plugins/datatables-bs4/js/dataTables.bootstrap4.min.js' %}"></script>
   <script src="{% static 'plugins/datatables-responsive/js/dataTables.responsive.min.js' %}"></script>
   <script src="{% static 'plugins/datatables-responsive/js/responsive.bootstrap4.min.js' %}"></script>
<script>
  $(function () {
    $("#sys_msg").DataTable({
      "responsive": false,   //适配手机端表格滚动，需设置为false
      "autoWidth": false,    //固定宽度
      "paging": true,        //允许分页
      "searching": true,     //允许内容搜索
      "lengthChange": true,  //允许改变每页显示的行数
      "ordering": true,      //允许排序
      "info": true,          //显示信息
        "oLanguage":{        //语言转换
            "sProcessing": "处理中...",
            "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "",
            "sZeroRecords": "没有找到匹配结果",
            "sInfo": "显示第 _START_ 至 _END_ 项结果，共_TOTAL_ 项",
            "sLengthMenu": "每页显示: _MENU_ 行",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sSearch": "搜索:",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上一页",
                "sNext": "后一页",
                "sLast": "尾页",
                },
            "oAria": {
            "sSortAscending": ": 以升序排列此列",
            "sSortDescending": ": 以降序排列此列"
        }
      }
    });
  });
</script>
    <script>
  $(function () {
    $("#user_msg").DataTable({
      "responsive": false,   //适配手机端表格滚动，需设置为false
      "autoWidth": false,    //固定宽度
      "paging": true,        //允许分页
      "searching": true,     //允许内容搜索
      "lengthChange": true,  //允许改变每页显示的行数
      "ordering": true,      //允许排序
      "info": true,          //显示信息
        "oLanguage":{        //语言转换
            "sProcessing": "处理中...",
            "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "",
            "sZeroRecords": "没有找到匹配结果",
            "sInfo": "显示第 _START_ 至 _END_ 项结果，共_TOTAL_ 项",
            "sLengthMenu": "每页显示: _MENU_ 行",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sSearch": "搜索:",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上一页",
                "sNext": "后一页",
                "sLast": "尾页",
                },
            "oAria": {
            "sSortAscending": ": 以升序排列此列",
            "sSortDescending": ": 以降序排列此列"
        }
      }
    });
  });
</script>
<script type="text/javascript">
//post提交的csrf认证
$.ajaxSetup({
    data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});
function tag_read(mid){

    $.ajax({
        type: "post",
        url: "{% url 'login:show_msg' 'system' %}",
        async: false,
        data:{
            'read': 'yes',
            'mid': mid,
        },
        success: function (data) {
            if(data.status === 1){
                //操作成功
                layui.use('layer',function () {
                    var layer=layui.layer;
                    info = data.info
                    layer.alert(info,{
                        icon: 6,
                        skin: 'layer-ext-moon',
                        offset: 'c',
                        yes: function () {
                            parent.layer.closeAll()
                            window.location.reload();
                        }
                    })
                })
            }else {
                //操作失败
                layui.use('layer',function () {
                    var layer=layui.layer;
                    info = data.info
                    layer.alert(info,{
                        icon: 0,
                        skin: 'layer-ext-moon',
                        offset: 'c',
                        yes: function () {
                            parent.layer.closeAll()
                        }
                    })
                })
            }
        }
    });
}
</script>
{% endblock %}
{% endblock %}